<template>
	<view class="content" v-if="pageShow">
		<!-- 轮播图 -->
		<view class="u-demo-block" v-if="goodsInfoShow">
			<u-swiper :list="list6" @change="e => currentNum = e.current" radius="0" :circular="true" :autoplay="true"
				indicatorStyle="right: 20px" height="375" imgMode="aspectFit " indicator indicatorMode="line"
				@click="lbtpriview(currentNum,list6)">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
				</view>
			</u-swiper>
		</view>
		<!-- 内容 -->
		<view class="padding" v-if="goodsInfoShow">
			<view class="padding border ffffff">
				<view class="flexbetween">
					<view class="margin_right3 qianshu">￥{{dataAll.price}}</view>
					<view class="color_jiu text_pee">已拼{{dataAll.sale_num}}件</view>
				</view>
				<view class="color_san text_g margin_top">{{dataAll.name}}</view>
				<view class="color_san text_g margin_top">{{dataAll.description}}</view>
			</view>
			<!-- 拼单 -->
			<view class="ffffff margin_top padding" v-if="goods_group_buying_data.length">
				<view class="flexbetween">
					<view class="color_san text_d">这些人已拼，参与可立即拼成</view>
					<view class="flexleft" @click="collShow=true">
						<view class="text_five margin_right1" style="color: #F3271C;">查看全部</view>
						<u-icon name="arrow-right" color="rgba(243, 39, 28, 1)" size="12"></u-icon>
					</view>
				</view>
				<view class="margin_top4">
					<swiper class="swiper" style="height: 160rpx;" circular :display-multiple-items="2" autoplay
						vertical :interval="3000">
						<swiper-item v-for="item in goods_group_buying_data" :key="item.id"
							v-if="item.groupusers.length">
							<view class="flexbetween margin_bottom4">
								<view class="flexleft" v-for="(ite,index) in item.groupusers" :key="ite.shop_id"
									v-show="index==0">
									<view class="imgBox margin_right3">
										<image :src="ite.avatar" mode="widthFix"></image>
									</view>
									<view class="text_d color_ling">{{ite.nickname}}</view>
								</view>
								<view class="text_five buy" @click="pindan(item.id)">去拼单</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- 评价 -->
			<view class="ffffff evalBox margin_top" v-if="comments.length">
				<view class="flexbetween">
					<view class="color_ling text_d">评价</view>
					<view class="flexleft" @click="goAllEval(listid)">
						<view class="text_five margin_right1" style="color: #F3271C;">查看全部</view>
						<u-icon name="arrow-right" color="rgba(243, 39, 28, 1)" size="12"></u-icon>
					</view>
				</view>
				<view class="" v-for="(item,index) in comments" :key="item.id" v-if="index==0">
					<view class="flexbetween margin_top5">
						<view class="flexleft">
							<view class="imgBox margin_right2">
								<image :src="item.avatar" mode="widthFix"></image>
							</view>
							<view class="text_d color_ling">{{item.nickname}}</view>
						</view>
						<view class="text_five" style="color: #666666;">{{item.createtime_text}}</view>
					</view>
					<view class="text_a color_six margin_top">{{item.content}}</view>
					<view class="margin_top flexleft flex_wrap">
						<view class="flexcenter" style="width: 33.33%;" v-for="(ite,ind) in item.images_arr" :key="ind"
							@click="lbtpriview(ind,item.images_arr)">
							<view class="evalImage">
								<image :src="ite" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 商品详情 -->
			<view class="margin_top1">
				<view class="padding ffffff margin_top">
					<view class="text word_san black">商品详情</view>
					<view class="margin_top padding" style="background-color: #F7F7F7; padding-top: 0;">
						<view class="flex" style="padding-top: 30rpx;" v-for="(item,index) in dataAll.param_json"
							:key="index">
							<view class="margin_right3">
								<view class="text_a color_jiu ">{{item.key}}</view>
							</view>
							<view class="text_a color_san">{{item.value}}</view>
						</view>

						<view class="flex" style="padding-top: 30rpx;" @click="show=true"
							v-if="dataAll.param_json.length>5">
							<view class="text_a color_jiu margin_right1">查看全部</view>
							<u-icon name="arrow-right" color="rgba(153, 153, 153, 1)" size="12"></u-icon>
						</view>
					</view>
					<view class="margin_top" v-for="(item,index) in dataAll.content_images_arr" :key="item"
						@click="lbtpriview(index,dataAll.content_images_arr)">
						<image :src="item" mode="widthFix" class="xq_img"></image>
					</view>
				</view>
			</view>
			<!-- 相似商品 -->
			<view class="margin_top6 section">
				<view class="color_ling text_weight text text" v-if="list.total">相·似·商·品</view>
				<view class="flexbetween flex_wrap margin_top1">
					<view class="shangpbox margin_top border1" v-for="item in list.data" :key="item.id"
						@click="goGoodsInfo(item.id)">
						<view class="shangptp">
							<image :src="item.image_text" mode="widthFix"></image>
						</view>
						<view class="padding15 ffffff baibox margin_top1">
							<view class="yihang text_a color_san">{{item.name}}</view>
							<view class="flexleft margin_top2">
								<view class="word_hh orange margin_right2">￥{{item.price}}</view>
								<view class="text_pee color_jiu">
									已拼{{item.sale_num}}件
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb ffffff">
			<view class="flexbetween">
				<view class="flexleft">
					<view class="margin_right3" @click="goShopInfo">
						<view class="dianpu"></view>
						<view class="heierse margin_top2">店铺</view>
					</view>
					<view class="margin_right3" @click="connection">
						<view class="lianxi"></view>
						<view class="heierse margin_top2">客服</view>
					</view>
					<view class="" @click="addcarFu">
						<view class="cart"></view>
						<view class="heierse margin_top1">加入购物车</view>
					</view>
				</view>
				<view class="shuangpinbtn">
					<view class="flexleft">
						<view class="text" style="margin-right: 94rpx;" @click="shopping">
							<view class="xiaohhtext">￥{{dataAll.alone_price}}</view>
							<view class="bigbaitext textcenter">单独购买</view>
						</view>
						<view class="text">
							<view class="xiaohhtext1">￥{{dataAll.price}}</view>
							<view class="bigbaitext1 textcenter" @click="buy">发起拼团</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 拼单弹窗 -->
		<u-popup :show="collShow" @close="collShow=false" mode="center" :round="10">
			<view class="collBox">
				<view class="title">可参与的拼单</view>
				<view style="position: absolute;right: 20rpx; top: 20rpx;" @click="collShow=false">
					<u-icon name="close" color="rgba(102, 102, 102, 1)" size="20"></u-icon>
				</view>
				<scroll-view scroll-y="true" style="height: 500rpx; padding-bottom: 30rpx;"
					v-if="goods_group_buying_data.length">
					<view class="margin_top5">
						<view class="flexbetween" style="margin-bottom: 60rpx;" v-for="item in goods_group_buying_data"
							:key="item.id" v-if="item.groupusers.length">
							<view class="flexleft" v-for="(ite,index) in item.groupusers" :key="ite.shop_id"
								v-show="index==0">
								<view class="imgBox margin_right3">
									<image :src="ite.avatar" mode="widthFix"></image>
								</view>
								<view class="text_d color_ling">{{ite.nickname}}</view>
							</view>
							<view class="text_five buy" @click="pindan(item.id)">去拼单</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 产品参数弹窗 -->
		<u-popup :show="show" @close="show=false" mode="bottom" :round="10">
			<view class="parameter">
				<view class="title">产品参数</view>
				<view style="position: absolute;right: 20rpx; top: 20rpx;" @click="show=false">
					<u-icon name="close" color="rgba(102, 102, 102, 1)" size="20"></u-icon>
				</view>
				<scroll-view scroll-y="true" style="height: 500rpx;">
					<view class="margin_top3 flex" v-for="(item,index) in dataAll.param_json" :key="index">
						<view class="text_a color_jiu parItem">{{item.key}}</view>
						<view class="text_a color_san parItem">{{item.value}}</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 规格弹窗 -->
		<u-popup :show="ggshow" @close="ggshow=false" mode="bottom" :round="10">
			<view class="padding">
				<view class="flexleft">
					<image :src="thumbnail" class="guigslt margin_right2" mode=""></image>
					<view class="">
						<view class="flexleft">
							<view class="dahtext margin_right1" v-if="buytype!=1">¥{{price}}</view>
							<view class="dahtext margin_right1" v-if="buytype==1">¥{{alone_price}}</view>
						</view>
						<view class="margin_top2 erslhuang">库存：{{stock}}</view>
					</view>
				</view>
				<view class="padding_top">
					<template v-if="dataAll.spu.length">
						<view v-for="(value,i) in dataAll.spu" :key="i">
							<view class="titletext margin_top">{{value.spu}}</view>
							<view class="flexleft flex_wrap">
								<view
									:class="value.selecttext==child?'margin_top margin_right2 huangg':'margin_top margin_right2 huigg'"
									v-for="child in value.spuitem_arr" :key="child" @click="checkgg(value,child)">
									{{child}}
								</view>
							</view>
						</view>
					</template>
					<view class="flexbetween margin_top">
						<view class="titletext">购买数量</view>
						<view class="jiajian">
							<view class="jianhao" @click="reducenum">
								<!-- <view class="line"></view> -->
							</view>
							<input type="number" class="xhtext text" style="width: 60rpx;" v-model="buynumber"
								@blur="addnum(1)" @input="clearNoNum()">
							<!-- <view class="xhtext">{{buynumber}}</view> -->
							<view class="jiahao" @click="addnum(2)"></view>
						</view>
					</view>
				</view>
				<view class="margin_top bigbtn" @click="ggclose">确定</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				collShow: false, //拼单
				show: false, //产品
				ggshow: false, //规格
				list6: [],
				currentNum: 0, //轮播图当前位置
				guigeflag: false, //规格标识，判断是否选中规格，选中为true否则为false
				// 商品类型
				listid: "", //商品id
				goodsInfoShow: true,
				dataAll: {},
				buynumber: 1,
				thumbnail: "",
				price: "", //商品拼团
				stock: "",
				alone_price: "", //商品原价
				comments: [], //评价信息
				list: {
					data: []
				},
				page: 1,
				buytype: 0, //0加入购物车，1普通购买，2拼团购买,3找人拼单
				unique: "", //规格id,
				goods_group_buying_id: "",
				goods_group_buying_data: [], //拼单列表
				pageShow: false,
				user_id:uni.getStorageSync("user_id"),//当前登录的用户id
			}
		},
		watch: {
			'dataAll.spu': {
				handler(newval) {
					if (this.dataAll.spec_type == 0) {
						this.guigeflag = true
						return false
					}
					let arr = []
					newval.forEach(item => {
						arr.push(item.selecttext)
					})
					// 规格换算价格
					let text = arr.join()
					this.dataAll.sku.forEach(item => {
						// 如果后台返回规格与前端规格一致，赋值换算
						if (item.sku == text) {
							this.price = item.price //价格赋值
							this.thumbnail = item.image_text
							this.alone_price = item.alone_price
							this.stock = item.stock_num //库存
							this.unique = item.unique
						}
					})
					// 计算是否选择规格
					let num = 0
					arr.forEach(item => {
						if (item != "") {
							num = num + 1
						}
					})
					if (num != arr.length) {
						this.guigeflag = false
					} else {
						this.guigeflag = true
					}
				},
				deep: true
			},
			ggshow(newval) {
				if (!newval) {
					this.goods_group_buying_id = ""
				}
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.init()
		},
		onShow() {
			this.getGoodsInfo()
		},
		methods: {
			goAllEval(id) {
				uni.navigateTo({
					url: "/pages_index/allEval?type=1&id=" + id
				})
			},
			getGoodsInfo() {
				let _this = this
				httpRequest.request('/api/goods/detail', 'GET', {
					id: _this.listid,
				}).then(res => {
					if (res.code == 1) {
						res.data.info.spu.forEach(item => {
							this.$set(item, "selecttext", "")
						})
						let info = res.data.info
						this.list6 = res.data.info.images_arr
						this.$set(res.data.info, "alone_price", res.data.info.sku[0].alone_price)
						this.alone_price = res.data.info.sku[0].alone_price
						this.stock = res.data.info.sku[0].stock_num
						this.thumbnail = info.spec_type ? res.data.info.sku[0].image_text : info.image_text
						this.price = res.data.info.price
						this.dataAll = res.data.info
						this.comments = res.data.comments
						this.goods_group_buying_data = res.data.goods_group_buying_data
						if (info.spec_type == 0) {
							this.unique = info.sku[0].unique
						}
						console.log(this.thumbnail, "tup");
						this.pageShow = true
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			pindan(id) {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				this.ggshow = true
				this.goods_group_buying_id = id
				this.buytype = 2
			},
			//立即购买
			buy() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				this.ggshow = true
				this.buytype = 2
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					goods_id: this.listid,
					search_type: 2,
				}
				let url = "/api/goods/get_like_goods"
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			lbtpriview(index, arr) {
				var i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i ,//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					loop:true,//循环预览只在APP生效
				})
			},

			// 加入购物车
			shopping() { //加入购物车弹窗
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				this.ggshow = true
				this.buytype = 1
			},
			goShopInfo() {
				let data = {
					id: this.dataAll.shop_id,
					shop_name: this.dataAll.shop.shop_name,
					shop_avatar: this.dataAll.shop.shop_avatar
				}
				uni.navigateTo({
					url: "/pages_index/shopInfo?msg=" + encodeURIComponent(JSON.stringify(data))
				})
			},
			connection() {
				if(this.dataAll.user_id==this.user_id){
					httpRequest.toast("自己不能和自己聊天哦！");
					return false
				}
				let that = this
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.requestChat('/api/user/addFriends', 'GET', {
					firend_id:this.dataAll.user_id,
					sendtype:1,
					user_id:uni.getStorageSync('user_id')
				}).then(res => {
					uni.hideLoading()
					let data = {
						firend_id: this.dataAll.user_id,
						friend_name: this.dataAll.shop.shop_name,
						firend_avatar_text: this.dataAll.shop.shop_avatar
					}
					uni.navigateTo({
						url: "/pages/chat/chat?msg=" + encodeURIComponent(JSON.stringify(data))
					})
				})
			},
			addcarFu() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				this.ggshow = true
				this.buytype = 0
			},
			// 规格选择
			checkgg(value, child) {
				value.selecttext = child
				// console.log(value.selecttext)
			},
			// 数量减
			reducenum() {
				if (this.buynumber == 1) {
					httpRequest.toast("不能再减了哦！")
					return
				}
				this.buynumber = Number(this.buynumber) - 1
			},
			//数量加
			addnum(type) {
				if (type == 1 && this.buynumber <= 0) {
					httpRequest.toast("至少购买一件哦！")
					this.buynumber = 1
					return false
				}
				this.buynumber = Number(this.buynumber) + 1
			},
			clearNoNum(obj) {
				console.log(obj);
				// obj.target.value = obj.target.value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
				obj.target.value = obj.target.value.replace(/[^\d]/g, ""); //清除“数字”以外的字符
				obj.target.value = obj.target.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
				obj.target.value = obj.target.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				obj.target.value = obj.target.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
				if (obj.target.value.indexOf(".") < 0 && obj.target.value != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
					obj.target.value = parseFloat(obj.target.value);
				}
				this.buynumber = obj.target.value
			},
			// 规格
			ggclose() {
				let _this = this
				if (!_this.guigeflag) {
					httpRequest.toast("请先选择规格")
					return
				}
				_this.ggshow = false
				if (_this.buytype == 0) {
					this.addCar()
					return false
				}
				let obj = {
					from_type: "detail", //来源：detail=从商品详情跳转过去的，cart=从购物车跳转过去的
					cart_ids: "",
					goods_num: this.buynumber, //	商品数量
					goods_id: this.listid, //	商品id
					goods_sku_unique: this.unique, //规格unique
					is_alone: this.buytype == 1 ? 1 : 0,
					goods_group_buying_id: this.goods_group_buying_id
				}
				uni.navigateTo({
					url: "/pages_index/confirmOrder?msg=" + encodeURIComponent(JSON.stringify(obj))
				})
			},
			addCar() {
				let _this = this
				httpRequest.request('/api/cart/addcart', 'POST', {
					goods_id: _this.listid, // 商品ID
					goods_sku_unique: _this.unique, // 规格ID
					cart_num: _this.buynumber, // 购买数量
				}, false, false, true).then(res => {
					if (res.code == 1) {
						httpRequest.toast('加入购物车成功');
					} else {
						httpRequest.toast(res.msg);
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			goGoodsInfo(id) {
				uni.navigateTo({
					url: "/pages_index/goodsInfo?id=" + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 拼单弹窗
	.collBox {
		width: 658rpx;
		box-sizing: border-box;
		padding: 60rpx 30rpx 0;
		position: relative;

		.title {
			font-size: 40rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			text-align: center;
		}
	}

	// 产品才数弹窗
	.parameter {
		padding: 40rpx 0;
		position: relative;

		.title {
			font-size: 34rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 800;
			color: #000000;
			text-align: center;
		}

		.parItem {
			padding: 20rpx 0 20rpx 60rpx;
			// border-bottom: 1rpx solid #F1F1F1;
		}
	}

	// 商品列表样式
	.shangpbox {
		width: 48%;
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
	}

	.shangptp {
		width: 100%;
		height: 338rpx;
		border-radius: 11rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.orange {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #F3271C;
	}

	.buy {
		width: 146rpx;
		height: 55rpx;
		border-radius: 39rpx;
		border: 2rpx solid rgba(243, 39, 28, 1);
		text-align: center;
		line-height: 55rpx;
		color: #F3271C;
	}

	.imgBox {
		width: 73rpx;
		height: 73rpx;
		border-radius: 50%;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	// 评价
	.evalBox {
		padding: 30rpx;

		.imgBox {
			width: 73rpx;
			height: 73rpx;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.evalImage {
			width: 152rpx;
			height: 152rpx;
			// border-radius: 50%;
			// overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				border-radius: 18rpx;
			}
		}
	}

	.xq_img {
		width: 100%;
		border-radius: 14rpx;
		// height: 579rpx;
	}

	.text_five {
		color: #F3271C;
	}

	.contactbtn {
		background-color: #fff;
		border: none;
		font-size: 32rpx;
		// line-height: 24rpx;
		color: #333;
		// height: 78rpx;
		height: 40rpx;
		// line-height: 78rpx;
		// padding: 0 400rpx 0 0;
	}

	.contactbtn::after {
		border: 0;
	}


	.ljduih {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		width: 286rpx;
		height: 93rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 70rpx;
		background-color: #ff7510;
	}

	.gudingdb {
		padding: 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.mjplt {
		width: 140rpx;
		height: 140rpx;
		border-radius: 18rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 18rpx;
		}
	}

	.button {
		padding: 20rpx 86rpx;
		background-color: #ff7510;
		border-radius: 70rpx;
		color: #ffff;
	}

	.pjslt {
		width: 73rpx;
		height: 73rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.titletext {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.flexbottom1 {
		display: flex;
		align-items: flex-end;
		// justify-content: center;
	}

	.bigbtn {
		background-color: rgba(243, 39, 28, 1);
		border-radius: 41rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 82rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.section {
		margin-bottom: 200rpx;
	}

	.imgs {
		width: 152rpx;
		height: 152rpx;
		border-radius: 18rpx;
	}


	.gouwuc {
		margin: auto;
		width: 45rpx;
		height: 45rpx;
		background-size: 100% 100%;
		//background-image: url('/static/image/index/kefu.png');
	}

	.heierse {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.dianpu {
		margin: auto;
		width: 35rpx;
		height: 32rpx;
		background-size: 100% 100%;
		background-image: url('/static/image/home/dianpu.png');
	}

	.lianxi {
		margin: auto;
		width: 35rpx;
		height: 32rpx;
		background-size: 100% 100%;
		background-image: url('/static/image/home/kefu.png');
	}
	.cart {
		margin: auto;
		width: 40rpx;
		height: 40rpx;
		background-size: 100% 100%;
		background-image: url('/static/image/home/cart.png');
	}

	// .wujiaox {
	// 	width: 27rpx;
	// 	height: 27rpx;
	// 	background-size: 100% 100%;
	// 	background-image: url('/static/image/home/collect_star.png');
	// }


	.qianshu {
		font-size: 48rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		color: rgba(243, 39, 28, 1);
	}


	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	::v-deep.u-safe-area-inset-bottom {
		padding-bottom: 0 !important;
	}


	.shuangpinbtn {
		padding: 20rpx 30rpx;
		background-size: 100% 100%;
		background-image: url('/static/image/home/shopping.png');


		.xiaohhtext {
			font-size: 32rpx;
			font-family: DIN-Bold, DIN;
			font-weight: bold;
			color: #A73A20;
		}

		.xiaohhtext1 {
			font-size: 32rpx;
			font-family: DIN-Bold, DIN;
			font-weight: bold;
			color: #ffffff;
		}

		.bigbaitext {
			font-size: 20rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #A73A20;
		}

		.bigbaitext1 {
			font-size: 20rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}

	.jiajian {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 50rpx;
		position: relative;
		background-size: 100% 100%;
		background-image: url('/static/image/home/bujinqi.png');
	}

	.jiahao {
		width: 38rpx;
		height: 40rpx;
		position: absolute;
		top: 0;
		right: 0;

	}

	.jianhao {
		width: 38rpx;
		height: 40rpx;
		position: absolute;
		left: 0;
		top: 0;

		.line {
			height: 3.5rpx;
			width: 22rpx;
			background-color: #999999;
		}
	}

	// .jiahao {
	// 	background-size: 100% 100%;
	// 	width: 21rpx;
	// 	height: 19rpx;
	// 	position: absolute;
	// 	top: 14rpx;
	// 	right: 12rpx;
	// }

	// .jianhao {
	// 	width: 22rpx;
	// 	position: absolute;
	// 	left: 13rpx;
	// 	// height: 3.5rpx;
	// 	top: 20rpx;
	// 	height: 20rpx;

	// 	.line {
	// 		height: 3.5rpx;
	// 		width: 22rpx;
	// 		background-color: #999999;
	// 	}
	// }

	.xhtext {
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: rgba(243, 39, 28, 1);
	}

	.huangg {
		// width: 147rpx;
		padding: 10rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(243, 39, 28, 1);
		background: rgba(243, 39, 28, .1);
		border-radius: 27rpx;

	}

	.huigg {
		padding: 10rpx 30rpx;
		// width: 147rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		background: rgba(245, 245, 245, 1);
		border-radius: 27rpx;

	}

	.erslhuang {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #666666;
	}

	.dahtext {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: rgba(243, 39, 28, 1);
	}

	.guigslt {
		width: 134rpx;
		height: 134rpx;
		border-radius: 8rpx;
	}

	.pjslt {
		width: 73rpx;
		height: 73rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.huisetext {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.huisetextjx {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		text-decoration: line-through;
	}
</style>